<template>
  <el-dialog v-model="visible" :title="`${paramsProps.title}`" :destroy-on-close="true" width="580px" draggable>
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :model="formData"
      @submit.enter.prevent="handleSubmit"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" placeholder="请填写用户名" clearable :disabled="isEdit" />
      </el-form-item>
      <!-- <el-form-item label="昵称" prop="nickname">
        <el-input v-model="formData.nickname" placeholder="请填写昵称" clearable />
      </el-form-item> -->
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formData.phone" placeholder="请填写手机号" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false"> 取消</el-button>
      <el-button type="primary" @click="handleSubmit"> 确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { type ElForm, ElMessage } from 'element-plus';
import type { UserForm, UserInfo } from '@/api/types/datainfo/driverUser';

defineOptions({
  name: 'DriverForm'
});

const rules = reactive({
  username: [{ required: true, message: '请填写用户名' }],
//   nickname: [{ required: true, message: '请填写昵称' }],
  phone: [{ required: true, message: '请填写手机号' }]
});

const visible = ref(false);
const isEdit = computed(() => !!formData.value.id);

const formData = ref<UserForm>({
  id: undefined,
  username: '',
  phone: '',
  nickname: '',
  logo: '',
  age: 0,
  sex: 0,
  idCard: '',
  email: '',
  accountStatusCd: '',
  userTagCd: '',
  birthday: ''
});

const paramsProps = ref<{
  title: string;
  row: Partial<UserInfo>;
  api: Function | undefined;
  getTableList: Function | undefined;
}>({
  title: '',
  row: {},
  api: undefined,
  getTableList: undefined
});

// 接收父组件传过来的参数
const acceptParams = (params: any) => {
  paramsProps.value = params;
  if (params.row && Object.keys(params.row).length > 0) {
    // 编辑模式
    formData.value = {
      id: params.row.id,
      username: params.row.username || '',
      phone: params.row.phone || '',
      nickname: params.row.nickname || '',
      logo: params.row.logo || '',
      age: params.row.age || 0,
      sex: params.row.sex || 0,
      idCard: params.row.idCard || '',
      email: params.row.email || '',
      accountStatusCd: params.row.accountStatusCd || '',
      userTagCd: params.row.userTagCd || '',
      birthday: params.row.birthday || ''
    };
  } else {
    // 新增模式，重置表单
    formData.value = {
      id: undefined,
      username: '',
      phone: '',
      nickname: '',
      logo: '',
      age: 0,
      sex: 0,
      idCard: '',
      email: '',
      accountStatusCd: '',
      userTagCd: '',
      birthday: ''
    };
  }
  visible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<InstanceType<typeof ElForm>>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return;
    try {
      // Prepare submit data with only the required fields
      const submitData: UserForm = {
        id: formData.value.id,
        username: formData.value.username,
        phone: formData.value.phone,
        nickname: formData.value.nickname,
        logo: formData.value.logo,
        age: formData.value.age,
        sex: formData.value.sex,
        idCard: formData.value.idCard,
        email: formData.value.email,
        accountStatusCd: formData.value.accountStatusCd || '1000001', // Default to active
        userTagCd: formData.value.userTagCd || '2000001', // Default to driver
        birthday: formData.value.birthday
      };

      await paramsProps.value.api!(submitData);
      ElMessage.success({ message: `${paramsProps.value.title}成功！` });
      paramsProps.value.getTableList!();
      visible.value = false;
    } catch (error) {
      console.error(error);
      ElMessage.error(`${paramsProps.value.title}失败`);
    }
  });
};

defineExpose({
  acceptParams
});
</script>

<style scoped lang="scss"></style>